<template>
  <div class="home">
    <van-swipe
        lazy-render
        vertical
        :show-indicators="false"
        ref="swipeRef"
        style="height: 100vh;"
        @change="onSwiperChange"
    >
      <van-swipe-item v-for="(item,index) in recommendList" :key="item.id">
        <div class="video-content relative">
          <video
              class="vdplayer"
              :id="'vd-' + index + '-' + 'index'"
              loop
              preload="auto"
              :src="item.src"
              webkit-playsinline="true"
              x5-video-player-type="h5-page"
              x5-video-player-fullscreen="true"
              playsinline
              @click="handleVideoClicked(item)"
          ></video>
          <span v-show="!isPlay" class="btn-play" @click="handleVideoClicked(item)">
            <van-icon name="play-circle-o"/>
          </span>
          <div class="swipe-info flex flex-col text-white absolute">
            <span>{{ '@' + item.author }}</span>
            <span>{{ item.videodesc }}</span>
            <van-notice-bar
                style="padding: 0;"
                left-icon="service-o"
                speed="100"
                background="transparent"
                color="white"
                :text="item.videoMusic"
            />
          </div>
          <div class="flex swipe-info-right absolute flex-col text-white text-center">
            <van-image
                style="border:2px solid white;margin: 5px;"
                round
                width="60"
                height="60"
                :src="item.avatar"
            />
            <div class="mt-5 flex flex-col" @click="toLike(item)">
              <van-icon name="like" size="30" :color="item.isLike?'red':'white'"/>
              {{ item.LikeNume }}
            </div>
            <div class="mt-5 flex flex-col" @click="toReply">
              <van-icon name="comment" size="30"/>
              {{ item.replyNum }}
            </div>
            <div class="mt-5 flex flex-col" @click="toShare">
              <van-icon name="share" size="30"/>
              {{ item.shareNum }}
            </div>

            <van-image class="animate-spin-slow"
                       style="margin: 10px;"
                       round
                       width="50"
                       height="50"
                       :src="item.avatar"
            />
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="swipe-progress">
      <!-- <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span> -->
      <div class="bar" :style="{ 'width': vdProgress + '%' }"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  onMounted,
  onUpdated,
  reactive,
  ref,
  toRefs,
  watch
} from 'vue';
import type {
  SwipeInstance
} from 'vant';
import {
  useWindowSize,
  useCountDown,
  useEventListener
} from '@vant/use'

// 获取vant的useWindowSize组合api，窗口变化检测
const {
  width,
  height
} = useWindowSize();
//获取swipe实例
const swipeRef = ref<SwipeInstance>();

const vdTimer = ref(null)
const tapTimer = ref(null)
// 播放视频列表
const recommendList = reactive([{
  id: 1,
  videodesc: '一生一定要和最爱的人来一次。” #稻城亚丁牛奶海 #和明天一起出发 ',
  videoMusic: '@A ming创作的原声',
  author: 'A ming',
  avatar: 'http://test.os.cjaipub.com/iop-web/resource-manage/basic/image/10297c51553a4565a772022e41df979c.jpg',
  shareNum: '7327',
  LikeNume: '6271',
  replyNum: '3242',
  isLike: false,
  isFollow: true,
  src: 'https://v1.kwaicdn.com/upic/2021/08/17/21/BMjAyMTA4MTcyMTAzNTBfMjMzNjc1OTYzMl81NTQ0NzYwOTIzNF8xXzM=_b_B80add9b9e2ba5d84204ba48476af87c3.mp4?pkey=AAVUxmBpDZNCCxT9teDSV0ksiR0O_FpYNl7f61uQfiqX7ZnrcZ-6cCzm6YFQwUMeL-_e_Q5dsUPZJRxCZu26WpPhZ2sj2gbDxeSNjJ24NFsOlwa_WFzq3OojBywS_tatAtU&tag=1-1634570759-xpcwebbrilliant-0-4wh8if4kwa-310789c304a8fa3f&clientCacheKey=3xu8xzpp4uxdpme_b.mp4&tt=b&di=1b11caf3&bp=14944',
},
  {
    id: 2,
    videodesc: '一大妈报团游黄龙和九寨沟，因没买玉器，遭导游辱骂，大妈被骂得浑身发抖，喘不上气来，工作人员连忙拿氧气给大妈吸氧#新闻 #尊老爱幼 #遵纪守法 #最新消息 ',
    videoMusic: '@商丘城事创作的原声',
    author: '商丘城事',
    avatar: 'http://test.os.cjaipub.com/iop-web/resource-manage/basic/image/8db1ea24ea2f4073885f308d348b60e4.jpg',
    shareNum: '172',
    LikeNume: '881',
    replyNum: '212',
    isLike: true,
    isFollow: true,
    src: 'https://v1.kwaicdn.com/upic/2021/08/26/11/BMjAyMTA4MjYxMTMwMDVfMTg4ODc2Mjc4Nl81NjAwNjY0MTAxNl8xXzM=_b_Bbf18912041f6ecdbbf5259a22612ba33.mp4?pkey=AAUwSgWJJtlhzjIR45mEuEGgfYS5r1SejcOAdTEG8oK1lc8kbRloaP8ubNt3oN45cVDfPlwKUlAosY4iyYosyXqXphYt06_Fpip4I-cGarTT43PiJKZbFKs70RlbBYW2v6s&tag=1-1634570759-xpcwebbrilliant-0-g58yixclpi-3d900b01829038c5&clientCacheKey=3xrzjp6gpv5upe4_b.mp4&tt=b&di=1b11caf3&bp=14944',
  }
])
// 页面所需数据
const data = reactive({
  activeIdx: 0,
  isPlay: true,
  vdProgress: 0,
  clickNum: 0,
})

// 解构出来
const {
  activeIdx,
  isPlay,
  vdProgress,
  clickNum
} = toRefs(data)

onMounted(() => {
})
onUpdated(() => {

})
const getVideoInstance: any = () => {
  return document.getElementById(`vd-${data.activeIdx}-index`)
}
const handleVideoClicked = (e) => {
  tapTimer.value && clearTimeout(tapTimer.value)
  data.clickNum++
  tapTimer.value = setTimeout(() => {
    if (data.clickNum >= 2) {
      e.isLike = true;
    } else {
      if (data.isPlay) {
        handlePause()
      } else {
        handlePlay()
      }
    }
    data.clickNum = 0
  }, 100)
}

//播放视频
const handlePlay = () => {
  let video = getVideoInstance()
  if (!video) return
  video.play()
  data.isPlay = true

  // 设置进度条
  vdTimer.value = setInterval(() => {
    handleProgress()
  }, 10)
}
const handlePause = () => {
  let video = getVideoInstance()
  if (!video) return
  video.pause()
  data.isPlay = false
  vdTimer.value && clearInterval(vdTimer.value)
}
const handleProgress = () => {
  let video = getVideoInstance()
  if (!video) return
  let curTime: number = video.currentTime.toFixed(1)
  let duration: number = video.duration.toFixed(1);
  data.vdProgress = parseInt((curTime / duration).toFixed(2) * 100)
}

const onSwiperChange = (index: number) => {
  vdTimer.value && clearInterval(vdTimer.value)
  data.vdProgress = 0
  data.isPlay = false
  let video = getVideoInstance()
  if (!video) return
  video.pause()
  // 重新开始
  video.currentTime = 0
  data.activeIdx = index
  // 自动播放下一个
  handlePlay()
}
const toLike = (e) => {
  e.isLike = !e.isLike
}
const toReply = () => {

}
const toShare = () => {

}
</script>

<style lang="scss">
.home {
  height: 100vh;
  background: #000000ba;
}

.video-content {
  width: 100%;
  position: relative;

  .swipe-info {
    width: calc(100% - 70px);
    padding: 10px;
    bottom: 40px;
  }

  .swipe-info-right {
    bottom: 40px;
    width: 70px;
    right: 10px;
    height: 55vh;
  }
}

.vdplayer {
  height: 100%;
  width: 100%;
}

.btn-play {
  position: absolute;
  top: 50%;
  color: white;
  z-index: 9999;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
}

.swipe-progress {
  height: 1px;
  position: fixed;
  bottom: 35px;
  background: #d1d5db80;
  width: 100%;

  .bar {
    background: white;
    height: 1px;
  }
}
</style>
